<template>
  <div class="app-container">
    <el-row :gutter="12">
      <el-col class="el-card_body" :span="4" v-for="i in list" :key="i.pash">
        <el-card shadow="hover">
          <router-link :to="'/validate/' + i.path">{{i.name}}</router-link>
        </el-card>
      </el-col>
      <!-- <el-col class="el-card_body" :span="4">
        <el-card  shadow="hover">
          <el-button type="text" @click="handleCreate">新增+</el-button>
        </el-card>
      </el-col>
       -->
      <el-dialog :title="textMap[dialogStatus]" :visible.sync="dialogFormVisible" :close-on-click-modal="false">
       <el-form label-width="100px" :model="Form" :rules="FormRules" ref="dataForm">
        <el-form-item label="设备类型" prop="deviceName" width="100%">
          <el-input v-model="Form.deviceName"></el-input>
        </el-form-item>
        <el-form-item label="路由地址" prop="path" width="100%">
          <el-input v-model="Form.path"></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button  type="primary" @click="dialogFormVisible = false">取消</el-button>
        <el-button type="primary"  @click="dialogStatus==='create'">确定</el-button>
      </div>
    </el-dialog>
    </el-row>
  </div>
</template>

<script>
export default {
  data() {
    return {
      list: [
        { name: "保温箱", path: "incubatorList" },
        { name: "冷藏车", path: "carList" },
        { name: "冷库", path: "warehouseList" }
      ],
      dialogStatus: "",
      textMap: {
        create: "新增设备类型"
      },
      dialogFormVisible: false,
      Form:{
        deviceName: '',
        path: '',
      },
      FormRules: {
        deviceName: [{ required: true, message: '请输入设备类型', trigger: 'blur' }],
        path: [{ required: true, message: '请输入路由地址', trigger: 'blur' }], 
      },
    };
  },
  methods:{
    handleCreate(){
      this.dialogStatus = 'create'
      this.dialogFormVisible = true;
      this.$nextTick(() => {
        this.$refs['dataForm'].clearValidate()
      })    
    },

       
    }
  }
</script>
<style lang="scss" scoped>
.el-card_body{ text-align: center;}
.el-button{padding: 0;}
</style>


